<template>
	<view class="work-container">
		<view class="top">
			<view class="image">
				<image-view class="img" v-if="captureVehicleUrl" :src="captureVehicleUrl" :big="true" :qj='panoramaUrl'>
				</image-view>
			</view>
		</view>
		<view class="Nav">
			<view :class="index == 1 ? 'typeCarS' : 'typeCar'" @click="NavClick(1)">
				{{ $t('warn:basicFeatures') }}
			</view>
			<view :class="index == 2 ? 'typeCarS' : 'typeCar'" @click="NavClick(2)">
				{{ $t('search:targetFeature') }}
			</view>
			<view :class="index == 3 ? 'typeCarS' : 'typeCar'" @click="NavClick(3)">
				{{ $t('warn:remarkInfo') }}
			</view>
		</view>
		<ul class="ul" v-if="index == 1">
			<li class="li">
				<view class="title">{{ $t('search:targetType') }}</view>
				<view class="tit">{{ vehicleTargetTypeFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureTime') }}</view>
				<view class="tit">{{ createTime | formatDate() }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureDevice') }}</view>
				<view class="tit">{{ deviceCameraClass }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateNumber') }}</view>
				<view class="tit">{{ vehiclePlateNumber }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:vehicleType') }}</view>
				<view class="tit">{{ vehicleTypeFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:vehicleColor') }}</view>
				<view class="tit">{{ vehicleColorFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:brandModel') }}</view>
				<view class="tit">{{ vehicleBrand }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateType') }}</view>
				<view class="tit">{{ vehiclePlateClassFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateColor') }}</view>
				<view class="tit">{{ vehiclePlateColorFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateOcclusion') }}</view>
				<view class="tit">{{ vehicleIsCovered }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:location') }}</view>
				<view class="tit blue-txt" @click="gotoMap" v-if="lng != null && lat != null">{{ lng }},{{ lat }}</view>
				<view class="tit " v-else>{{ $t('warn:noData') }}</view>
			</li>
		</ul>
		<ul class="ul" v-if="index == 2">
			<li class="li">
				<view class="title">{{ $t('search:calling') }}</view>
				<view class="tit">{{ getFormDriverCall(driverCall) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:luggageRack') }}</view>
				<view class="tit">{{ getFormDriverCall(rack) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:sunroof') }}</view>
				<view class="tit">{{ getFormDriverCall(sunroof) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:spareTire') }}</view>
				<view class="tit">{{ getFormDriverCall(spareTire) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:driverBelt') }}</view>
				<view class="tit">{{ driverSeatBellFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:passengerBelt') }}</view>
				<view class="tit">{{ deputySeatBellFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:sunVisor') }}</view>
				<view class="tit">{{ visor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:inspectionSticker') }}</view>
				<view class="tit">{{ motTagFormat }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:tissueBox') }}</view>
				<view class="tit">{{ getFormDriverCall(paper) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:pendant') }}</view>
				<view class="tit">{{ getFormDriverCall(pendant) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:dumper') }}</view>
				<view class="tit">{{ getFormDriverCall(muckCars) }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:dangerousGoods') }}</view>
				<view class="tit">{{ getFormDriverCall(dangerGoods) }}</view>
			</li>
		</ul>
		<ul class="ul" v-if="index == 3">
			<li class="li">
				<view class="title">{{ $t('warn:remark') }}</view>
				<view class="tit">{{ vehicleFeatureStatusRemark }}</view>
			</li>
		</ul>
		<view style="width: 750rpx;height: 120rpx;"></view>
		<view class="btns">
			<button size="mini" type="primary" @click="PCupdata(1)">{{ $t('warn:ok') }}</button>
			<button size="mini" type="default" @click="PCupdata(2)">{{ $t('warn:cancel') }}</button>
			<button size="mini" type="primary" @click="PCupdata(3)" style="background-color: #e6a23c;">{{
				$t('warn:doubtful') }}</button>
		</view>
	</view>
</template>

<script>
import { PCupdataTypeCar } from '@/api/warning/index.js'
export default {
	data() {
		return {
			index: 1,
			list: [],
			createTime: '',
			deviceCameraClass: '',
			pendant: '',
			sunroof: '',
			muckCars: '',
			certificateNo: '',
			dangerGoods: '',
			vehicleBrand: '',
			vehiclePlateColor: '',
			vehicleColor: '',
			fraction: '',
			vehicleType: '',
			sex: '',
			age: '',
			certificateNo: '',
			reservoir: '',
			mask: '',
			equipment: '',
			paper: '',
			address: '',
			fraction: '',
			visor: '',
			spareTire: '',
			rack: '',
			driverSeatBell: '',
			deputySeatBell: '',
			vehicleFeatureStatusRemark: '',
			captureVehicleUrl: '',
			vehicleIsCovered: '',
			driverCall: '',
			vehiclePlateNumber: '',
			// targetType: '',
			motTag: '',
			vehiclePlateClass: '',
			panoramaUrl: '',
			lng: '',
			lat: '',
			alarmId: '',
		}
	},
	computed: {
		vehicleTypeFormat() {
			const str = this.vehicleType,
				sexEnum = {
					"null": this.$t('search:unknown'),
					"0": this.$t('search:unknownOther'),
					"1": this.$t('search:carPlaceholder'),
					"2": this.$t('search:truckPlaceholder'),
					"3": this.$t('search:van'),
					"4": this.$t('search:bus'),
					"5": this.$t('search:smallTruckPlaceholder'),
					"6": this.$t('search:suvPlaceholder'),
					"7": this.$t('search:midBus'),
					"8": this.$t('search:motorcycleNonMotor'),
					"9": this.$t('search:pedestrian'),
					"10": this.$t('search:schoolBus'),
					"11": this.$t('search:dumpTruck'),
					"12": this.$t('search:highRisk'),
					"13": this.$t('search:cyclistPlaceholder'),
					"15": this.$t('search:microCar'),
					"16": this.$t('search:smallCar'),
					"17": this.$t('search:compactCar'),
					"18": this.$t('search:hatchback'),
					"19": this.$t('search:sedan'),
					"20": this.$t('search:lightVan'),
					"21": this.$t('search:smallSuv'),
					"22": this.$t('search:compactSuv'),
					"23": this.$t('search:midSuv'),
					"24": this.$t('search:largeSuv'),
					"25": this.$t('search:fullSizeSuv'),
					"26": this.$t('search:microVan'),
					"27": this.$t('search:mpv'),
					"28": this.$t('search:coupe'),
					"29": this.$t('search:miniTruck'),
					"30": this.$t('search:pickup'),
					"31": this.$t('search:midTruck'),
					"32": this.$t('search:lightTruck'),
					"33": this.$t('search:heavyTruck'),
					"34": this.$t('search:taxi'),
					"35": this.$t('search:tanker'),
					"36": this.$t('search:crane'),
					"37": this.$t('search:trailer'),
					"38": this.$t('search:mixerTruck'),
					"40": this.$t('search:fireTruck'),
					"41": this.$t('search:escort'),
					"42": this.$t('search:repairTruck'),
					"43": this.$t('search:rescue'),
					"512": this.$t('search:allModels'),
				}
			return sexEnum[str] || '--'
		},
		vehicleColorFormat() {
			const str = this.vehicleColor,
				sexEnum = {
					"0": this.$t('search:unknownUnrecognized'),
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"3": this.$t('search:gray'),
					"4": this.$t('search:red'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"7": this.$t('search:orange'),
					"8": this.$t('search:brown'),
					"9": this.$t('search:green'),
					"10": this.$t('search:purple'),
					"11": this.$t('search:cyan'),
					"12": this.$t('search:pink'),
					"13": this.$t('search:transparent'),
					"14": this.$t('search:gold'),
					"15": this.$t('search:silver'),
					"16": this.$t('search:darkGray'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		vehiclePlateColorFormat() {
			const str = this.vehiclePlateColor,
				sexEnum = {
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"9": this.$t('search:green'),
					"14": this.$t('search:gradualGreenBlack'),
					"15": this.$t('search:yellowGreenBlack'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		vehicleTargetTypeFormat() {
			const str = this.vehicleType,
				sexEnum = {
					"1": this.$t('search:pedestrian'),
					"2": this.$t('search:twoWheeler'),
					"3": this.$t('search:tricycle'),
					"4": this.$t('search:motor'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		motTagFormat() {
			const str = this.motTag,
				sexEnum = {
					"0": this.$t('search:unrecognized'),
					"1": this.$t('warn:recognized', { number: 0 }),
					"2": this.$t('warn:recognized', { number: 1 }),
					"3": this.$t('warn:recognized', { number: 2 }),
					"4": this.$t('warn:recognized', { number: 3 }),
					"5": this.$t('warn:recognized', { number: 4 }),
					"6": this.$t('warn:recognized', { number: 5 }),
					"7": this.$t('warn:recognized', { number: 6 }),
					"8": this.$t('warn:recognized', { number: 7 }),
					"9": this.$t('warn:recognized', { number: 8 }),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		driverSeatBellFormat() {
			const str = this.driverSeatBell,
				sexEnum = {
					"0": this.$t('search:beltNotWorn'),
					"1": this.$t('search:beltWorn'),
					"2": this.$t('search:unrecognized'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		deputySeatBellFormat() {
			const str = this.deputySeatBell,
				sexEnum = {
					"0": this.$t('search:beltNotWorn'),
					"1": this.$t('search:beltWorn'),
					"2": this.$t('search:unrecognized'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		},
		vehiclePlateClassFormat() {
			const str = this.vehiclePlateClass,
				sexEnum = {
					"0": this.$t('search:unknownType'),
					"1": this.$t('search:bluePlate'),
					"2": this.$t('search:blackPlate'),
					"3": this.$t('search:yellowPlate'),
					"4": this.$t('search:doubleYellow'),
					"5": this.$t('search:policePlate'),
					"6": this.$t('search:armedPolice'),
					"7": this.$t('search:doubleWhiteArmed'),
					"8": this.$t('search:militaryPlate'),
					"9": this.$t('search:doubleMilitary'),
					"10": this.$t('search:consulatePlate'),
					"11": this.$t('search:hkPlate'),
					"13": this.$t('search:macauPlate'),
					"14": this.$t('search:tractorPlate'),
					"15": this.$t('search:factoryPlate'),
					"16": this.$t('search:customPlate'),
					"17": this.$t('search:newEnergyPlate'),
					"18": this.$t('search:otherType'),
					"19": this.$t('search:trailer'),
					"20": this.$t('search:coachPlate'),
					"21": this.$t('search:tempPlate'),
					"100": this.$t('warn:embassyMotorcycle'),
					"null": this.$t('search:unknown')
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		this.setDetail(JSON.parse(option.data))
		this.alarmId = option.alarmId
	},
	methods: {
		//位置详情页面
		gotoMap() {
			this.$tab.navigateTo('/pages/warning/components/map_one?lng=' + this.lng + '&lat=' + this.lat)
		},
		showPanorama() {
			uni.previewImage({
				urls: ['/fileApi/' + this.panoramaUrl],
				current: '', // 当前显示图片的http链接，默认是第一个
			})
		},
		// 切换栏
		NavClick(index) {
			this.index = index
		},
		setDetail(data) {
			this.deviceCameraClass = data.deviceName ? data.deviceName : this.$t('search:none')
			this.motTag = data.motTag
			this.createTime = data.createTime
			this.vehiclePlateNumber = data.vehiclePlateNumber
			this.vehicleType = data.vehicleType
			this.driverSeatBell = data.driverSeatBell
			this.deputySeatBell = data.deputySeatBell
			this.pendant = data.pendant
			this.sunroof = data.sunroof
			this.vehicleColor = data.vehicleColor
			this.spareTire = data.spareTire
			this.dangerGoods = data.dangerGoods
			this.vehiclePlateClass = data.vehiclePlateClass
			this.muckCars = data.muckCars
			this.vehiclePlateColor = data.vehiclePlateColor
			this.visor = data.visor ? data.visor : this.$t('search:unknown')
			this.paper = data.paper
			this.rack = data.rack
			this.vehicleIsCovered = data.vehicleIsCovered ? data.vehicleIsCovered : this.$t('search:unknown')
			this.driverCall = data.driverCall
			this.vehicleBrand = data.vehicleBrand ? data.vehicleBrand : this.$t('search:unknown')
			this.captureVehicleUrl = data.captureVehicleUrl
			this.vehicleFeatureStatusRemark = data.vehicleFeatureStatusRemark ? data.vehicleFeatureStatusRemark : this.$t('search:unknown')
			this.panoramaUrl = data.panoramaVehicleUrl
			this.lng = data.lng
			this.lat = data.lat
		},
		// pc端研判结果 1 确定 2取消 3存疑
		PCupdata(index) {
			// if (this.list.isAlarm == 0) {
			PCupdataTypeCar({
				alarmId: this.alarmId,
				isAlarm: index
			}).then(res => {
				if (res.code == '00000000') {
					uni.reLaunch({
						url: '/pages/warning/index'
					})
				}
			})
		},
		getFormDriverCall(str) {
			const sexEnum = {
				"0": this.$t('search:no'),
				"1": this.$t('search:yes'),
				"2": this.$t('search:unrecognized'),
				"null": this.$t('search:unknown')
			}
			return sexEnum[str] || '--'
		},
	},
	filters: {
		// 时间戳处理
		formatDate: function (num) {
			let date = new Date(num);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d; //天补0
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
	}
}
</script>

<style>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 40rpx 40rpx 10rpx 40rpx;
}

.top .image {
	width: 100%;
	text-align: center;
}

.image .img {
	width: 100%;
	border-radius: 10rpx;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.ul .title_box {
	list-style: none;
	color: #2879ff;
}

.ul .title_box .title {
	width: 160rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid #2879ff;
}

.Nav {
	width: 700rpx;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1px solid #f1f1f1;
}

.typeCar {
	padding: 20rpx;
}

.typeCarS {
	padding: 20rpx;
	border-bottom: 1px solid #2979ff;
	color: #2979ff;
}

.blue-txt {
	color: #2979ff !important;
}

.btns {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	background-color: #fff;
	display: flex;
	justify-content: center;
}

.btns button {
	width: 200rpx;
	padding: 5rpx 0;
	margin: 20rpx auto;
}
</style>